<template>
  <div id="app-wrap">
    <div class="fixd-button" v-if="!$route.meta.hiddenButton">
      <van-icon name="apps-o" v-if="!showButtons" size="20" @click="changeButtons"/>
      <transition name="fade">
        <div class="button-group-wrap" v-if="showButtons" @click="changeButtons">
          <div class="button-group">
            <van-icon class="icon-button" size="20" name="home-o" @click="jump(0)"/>
            <van-icon class="icon-button" size="20" name="apps-o" @click="jump(1)"/>
            <van-icon class="icon-button" size="20" name="cart-o" @click="jump(2)"/>
            <van-icon class="icon-button" size="20" name="contact" @click="jump(3)"/>
            <van-icon class="icon-button" size="20" name="cross"/>

          </div>

        </div>
      </transition>

    </div>
    <router-view/>
    <van-tabbar v-if="$route.meta.navShow" class="tab-bottom" v-model="active" active-color="#ee0a24"
                inactive-color="#000">

      <van-tabbar-item v-for="(item,index) in tabbars"
                       :icon="item.icon"
                       :to="item.to"
                       :key="index">
        {{ item.pathName }}
      </van-tabbar-item>
    </van-tabbar>
    <van-dialog v-model="$store.getters.isLoading" :showConfirmButton="false"  class="dialog">
      <van-loading type="spinner"  />

    </van-dialog>
  </div>
</template>

<script>

export default {
  name: 'App',
  watch: {
    $route: 'changeActive'
  },
  created () {
    const toName = this.$route.name
    this.setActive(toName)
  },
  methods: {
    changeButtons () {
      this.showButtons = !this.showButtons
      console.log(this.showButtons)
    },
    changeActive ({name}) {
      this.setActive(name)
    },
    setActive (name) {
      this.tabbars.forEach((tab, i) => {
        if (tab.name === name) {
          this.active = i
          return false
        }
      })
    },
    jump (index) {
      let tabbar = this.tabbars[index]
      this.$router.push({path: tabbar.to})
    }

  },
  data () {
    return {
      showButtons: false,
      tabbars: [
        {
          name: 'home',
          pathName: '首页',
          to: '/',
          icon: 'home-o'
        },
        {
          name: 'category',
          pathName: '分类',
          to: '/category',
          icon: 'apps-o'
        },
        {
          name: 'cart',
          pathName: '购物车',
          to: '/order',
          icon: 'cart-o'
        },
        {
          name: 'user',
          pathName: '我的',
          to: '/user',
          icon: 'contact'
        }
      ],
      active: 0
    }
  }

}
</script>

<style  >

@import "./assets/icon/iconfont.css";
.dialog{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width: 60px;
  height: 60px;
  background-color: rgba(0,0,0,0.5);
}
.van-uploader__input-wrapper{
  width: 100%!important;;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to
  /* .fade-leave-active below version 2.1.8 */
{
  opacity: 0;
}

.btn-add-car-wrap {
  background: white;
  text-align: right;
}
.bottom-submit-button{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.no-service {
  color: #E65D6E;
}

.card {
  background-color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 3px rgb(220, 220, 220);
}

.service {
  padding: 0 10px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
}

.service > p {
  padding: 0;
  margin: 10px 0 0 0;
  font-weight: normal;
  font-size: 14px;
}

.warning > img {
  margin-right: 5px;
  width: 25px;
  height: 25px;
}

.card-goods-content {
  display: flex;
  flex-grow: 1;
  background: white;
  justify-content: flex-end;
  flex-direction: row;

}

.good-count {
  color: #323233;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 14px;
}

.shop-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 10px 5px;
  font-weight: bold;
}

.van-divider {
  margin: 10px 0;
}

.order-status {
  font-size: 14px;
  color: #E65D6E;
}

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#app-wrap {
  background: #f3f3f3;
  flex: 1;
  width: 100%;
  height: 100%;
}

.button-group {
  border-radius: 20px;
  background: white;
  transform: translateX(-50%);
  bottom: -15px;
  position: absolute;
}

.button-group-wrap {
  bottom: 0;
  position: relative;
}

.fixd-button {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  width: 30px;
  height: 30px;
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: white;
}

.icon-button {
  margin: 5px;
}
</style>
